<template>
	<view class="choose-coupon-box">
		<view class="coupon-bg" v-for="(item, index) in dataList" :key="index" @tap.stop="useCoupon(item)">
			<text class="qh-rt-single coupon-bg-icon" :class="couponIcons[item.coupon_choice_type]"></text>
			<view class="coupon-box">
				<view class="left">
					<text>￥</text>
					<text>{{item.reduce_money}}</text>
				</view>
				<view class="right">
					<view class="title">{{item.coupon_name}}</view>
					<view class="cooupon-mj">
						<text>满{{item.need_money}}元减使用</text>
					</view>
					<view class="stage">{{item.begin_time}}~{{item.end_time}}</view>
					<view class="btn" :class="'coupon-type-'+item.coupon_choice_type">使用</view>
				</view>
			</view>
		</view>
		<view class="loading">
			<block v-if="isLoading">
				<image src="https://mall.xzthealth.com/loading2.gif"></image>
				<text>加载中</text>
			</block>
		</view>
		<view class="donot" @tap="notUseCoupon" :style="footerStyle">不使用优惠券</view>
		<view v-if="!isLoading && !dataList.length" class="empty">暂无可用优惠券</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				store_id: '', //门店id
				money: 0, //订单金额
				is_integral_cash: 0, //1启用 0不启用
				shopping_ids: '', //购物车id
				order_source_type: 2, //1商户页下单 2门店页下单
				scene_type: 1, //1普通下单 2预售下单
				isLoading: true,
				dataList: [],
				couponIcons: {
					1: 'coupon-type-1 qh-rt-youhuiquan',
					2: 'coupon-type-2 qh-rt-huiyuanyouhuiquan',
					3: 'coupon-type-3 qh-rt-shangjiaquan',
				},
				type: 1,
			}
		},
		computed: {
			footerStyle() {
				return `height:${this.$store.bottomHeight + 90}rpx;padding-bottom:${this.$store.bottomHeight}rpx`;
			},
		},
		async onLoad(options) {
			this.money = options.money;
			if (options.shopping_ids) {
				this.shopping_ids = options.shopping_ids;
				this.type = 2;
			}
			if (options.order_source_type) {
				this.order_source_type = options.order_source_type;
			}
			if (options.scene_type) {
				this.scene_type = options.scene_type;
			}
			if (options.store_id) {
				this.store_id = options.store_id;
			}
			if (options.is_integral_cash) {
				this.is_integral_cash = options.is_integral_cash;
			}
			await this.$onLaunched;
			this.getData();
		},
		methods: {
			notUseCoupon() {
				uni.removeStorageSync('useCoupon');
				this.$nextTick(() => {
					uni.navigateBack({
						delta: 1
					});
				})
			},
			useCoupon(item) {
				uni.setStorageSync('useCoupon', item);
				uni.navigateBack({
					delta: 1
				});
			},
			async getData() {
				let url = this.type == 1 ? '/AggregationCode/User/getWholeUsableCouponList' : 'SmallProgramApi/Coupon/getBuyGoodsWholeUsableCouponList';
				let param = this.type == 1 ? {
					actual_payment_amount: this.money
				} : {
					store_id: this.store_id,
					money: this.money,
					is_integral_cash: this.is_integral_cash,
					shopping_ids: this.shopping_ids,
					order_source_type: this.order_source_type,
					scene_type: this.scene_type,
				}
				const {
					status,
					data,
					message
				} = await this.$request(url, param);
				this.isLoading = false;
				if (status != 1) return uni.showModal({
					title: '温馨提示',
					content: message,
					showCancel: false,
					confirmText: '确定',
				})
				this.dataList = data;
			},
		}
	}
</script>

<style lang="scss">
	.choose-coupon-box {
		width: 690rpx;
		margin: 0 30rpx;
		overflow-y: auto;
		margin-bottom: 100rpx;
		height: calc(100vh - 90px);
	}

	.coupon-bg {
		width: 100%;
		height: 180rpx;
		position: relative;
		margin-top: 20rpx;

		&:nth-last-child(1) {
			margin-bottom: 30rpx;
		}

		.coupon-type- {
			&1 {
				color: #ff5c6d;
			}

			&2 {
				color: #efa04b;
			}

			&3 {
				color: #3fd8a3;
			}
		}

		.coupon-bg-icon {
			font-size: 180rpx;
		}

		.coupon-box {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;

			.left {
				color: #fff;
				width: 200rpx;
				font-size: 36rpx;
				line-height: 42rpx;
				white-space: pre-wrap;
				word-break: break-all;
				text-align: center;
			}

			&>text:nth-child(1) {
				font-size: 26rpx;
				line-height: 30rpx;
			}

			&>text:nth-child(2) {
				font-size: 50rpx;
				line-height: 50rpx;
			}

			.right {
				padding: 10rpx 30rpx 30rpx;
				flex: 1;
				box-sizing: border-box;

				.title {
					height: 44rpx;
					line-height: 44rpx;
					font-size: 32rpx;
					color: #fff;
				}

				.cooupon-mj {
					width: 100%;
					line-height: 50rpx;
					height: 50rpx;
					font-size: 24rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #fff;
				}

				.stage {
					height: 36rpx;
					line-height: 36rpx;
					font-size: 22rpx;
					color: #fff;
				}

				.btn {
					width: 100rpx;
					height: 36rpx;
					background-color: #fff;
					font-size: 22rpx;
					border-radius: 20rpx;
					line-height: 36rpx;
					text-align: center;
					position: absolute;
					top: 70rpx;
					right: 30rpx;
				}
			}
		}
	}

	.donot {
		width: 100%;
		height: 90rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		color: #999;
		text-align: center;
		font-size: 30rpx;
		line-height: 90rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #eee;
	}
</style>
